<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href=/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="/assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="/assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="/assets/css/app.css">
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/amazeui.min.js"></script>
    <script src="/assets/js/amazeui.datatables.min.js"></script>
    <script src="/assets/js/dataTables.responsive.min.js"></script>
    <script src="/assets/js/app.js"></script>
    <script src="/assets/js/theme.js"></script>
    <script src="/assets/js/atm.js?v=6"></script>

</head>
<header>
    <!-- logo -->
    <div class="am-fl tpl-header-logo">
        <a href="javascript:;">大猿ATM</a>
    </div>
    <!-- 右侧内容 -->
    <div class="tpl-header-fluid">
        <!-- 侧边切换 -->

        <!-- 搜索 -->

        <!-- 其它功能-->
        <div class="am-fr tpl-header-navbar" id="messageDiv">
            <ul>
                <!-- 欢迎语 -->
                <li class="am-text-sm tpl-header-navbar-welcome">
                    <a href="javascript:;">欢迎你, <span>${loginUser.username}</span> </a>
                </li>

                <!-- 新邮件 -->


                <!-- 新提示 -->
                    <li class="am-dropdown" data-am-dropdown>
                        <a @click="msgClickHandler" href="javascript:;" class="am-dropdown-toggle" data-am-dropdown-toggle>
                            <i class="am-icon-bell"></i>
                            <span class="am-badge am-badge-warning am-round item-feed-badge">{{messageCount}}</span>
                        </a>

                        <!-- 弹出列表 -->
                        <ul class="am-dropdown-content tpl-dropdown-content">


                            <li class="tpl-dropdown-menu-notifications" v-for="msg in atmMessage">
                                <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                    <div class="tpl-dropdown-menu-notifications-title">
                                        <i class="am-icon-line-chart"></i>
                                        <span> {{msg.message}}</span>
                                    </div>
                                    <div class="tpl-dropdown-menu-notifications-time">
                                        {{formatTime(msg.createTime)}}
                                    </div>
                                </a>
                            </li>



                            <li class="tpl-dropdown-menu-notifications">
                                <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                    <i class="am-icon-bell"></i> 进入列表…
                                </a>
                            </li>
                        </ul>
                    </li>

                <audio :src="voiceUrl" autoplay>
                </audio>


                <!-- 退出 -->
                <li class="am-text-sm">
                    <a href="###" onclick="logout()">
                        <span class="am-icon-sign-out"></span> 退出
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <script src="/assets/js/reconnecting-websocket.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var socketVue = new Vue({
            el : '#messageDiv',
            data : {
                messageCount : 0,
                voiceUrl : '',
                atmMessage : []
            },
            methods : {
                formatTime : function (timeValue) {
                    let currentMill = new Date().getTime();
                    let second = (currentMill - timeValue) / 1000;

                    second = parseInt(second);

                    if (second >= 60) {
                        let minuts = parseInt(second / 60);
                        return minuts + '分之前';
                    }

                    return second == 0 ? "刚刚" : second + '秒之前';
                },

                msgClickHandler : function () {
                    if (this.atmMessage.length == 0) {
                        return;
                    }

                    let msgObject = this.atmMessage[0];
                    this.atmMessage.splice(0, 1, msgObject);
                }
            }
        })


        var ws = new ReconnectingWebSocket("${websocketUrl}?userId=${loginUser.id}");
        ws.onopen = function() {
            console.log('onopen()');
        };
        ws.onmessage = function(evt) {
            console.log('recive service message=' + evt.data);
            var wsMsg = $.parseJSON(evt.data);

            if (wsMsg == undefined) {
                return;
            }

            if (wsMsg.msgType != 1) {
                return;
            }

            //TODO 提醒 +1  语音提示
            socketVue.messageCount += 1;
            socketVue.atmMessage.unshift(wsMsg);
            socketVue.voiceUrl = '${websocketVoiceUrl}?amount=' + wsMsg.amount;
        };
        ws.onclose = function(evt) {
            console.log('websocket close()')
        };
        ws.onerror = function(evt) {
            console.log('websocket error()' + evt.data)
        };

        function logout() {
            atm.ajax({
                url : '/user/logout',
                requestMethod : 'POST',
                data : {
                },
                success : function (responseData) {
                    window.location.href = '/';
                }
            })
        }
    </script>

</header>